<template>
  <div class="page_main">
    <div class="header">
      <div class="title">供应商确认单</div>
    </div>
    <div class="content">
      <el-form v-loading="formLoading" ref="cuForm" :model="cuForm" :rules="rules" :disabled="formDisabled">
        <table class="mailTable">
          <tr class="firstTr">
            <td style="width: 30%" class="firstTd column tip_td">
              供应商名称
            </td>
            <td style="width: 70%" colspan="3" class="column">
              {{ cuForm.supplier }}
            </td>
          </tr>
          <tr>
            <td class="firstTd column tip_td">
              画面
            </td>
            <td class="column flex" style="padding: 10px;height: 100%;">
              <el-card shadow="always" class="margin-right-sm margin-bottom-sm text-left"
                v-for="(item,index) in cuForm.picList" :key="index" style="max-width: 300px;">
                <div class="margin-bottom-xs flex">
                  <div>画面：</div>
                  <div>
                    <el-image style="width: 100px;height: 160px;;margin: 5px;" :src="item.pic_url" fit="contain"
                      :preview-src-list="[item.pic_url]">
                    </el-image>
                  </div>
                </div>
                <div class="margin-bottom-xs">材质：{{ item.pic_type }}</div>
                <div class="margin-bottom-xs">尺寸：{{ item.size_width + 'cm*' + item.size_height + 'cm' }}</div>
                <div class="margin-bottom-xs">数量：{{ item.num }}</div>
                <div class="margin-bottom-xs ">单价：<span class="text-price">{{ item.price }}</span><span
                    class="margin-left-xs">/ m<sup>2</sup></span></div>
                <div>小计：<span class="text-price text-green">{{ item.subtotal }}</span></div>
              </el-card>
            </td>
          </tr>
          <tr>
            <td class="firstTd column tip_td">
              总价
            </td>
            <td class="column" style="padding: 10px">
              <div class="text-left text-lg text-bold text-red text-price">{{ totalPrice }}</div>
            </td>
          </tr>
          <tr>
            <td class="firstTd column tip_td">
              送达时间
            </td>
            <td class="column" style="padding: 10px">
              <el-form-item prop="deliver_time">
                <el-date-picker clearable v-model="cuForm.deliver_time" type="datetime" placeholder="选择送达时间"
                  value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;">
                </el-date-picker>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td class="firstTd column tip_td">
              客户确认签字
            </td>
            <td class="column">
              <el-button v-show="!cuForm.sign_img_url && !sign_img_url" @click="showSignDialog">签字确认</el-button>
              <el-image v-if="cuForm.sign_img_url || sign_img_url" :src="cuForm.sign_img_url||sign_img_url"></el-image>
            </td>
          </tr>
        </table>
        <div style="text-align: center;padding-bottom: 20px">
          <el-button v-if="!cuForm.sign_img_url" type="primary" @click="submit">确认提交</el-button>
        </div>
      </el-form>
      <sign-dialog ref="signDialog" @confirm-sign="confirmSign"></sign-dialog>
    </div>
  </div>
</template>

<script>
  import FlowBtnRow from '@/components/FlowBtnRow'
  import { confirm_bill_detail, sign_confirm_bill } from '@/api/business/ad_make_order'
  import { cloneDeep } from 'lodash'
  import SignDialog from '@/components/SignDialog'
  import { upFileBase64Anon } from '@/api/others'
  import {
    accAdd
  } from '@/utils/util'

  export default {
    name: 'customer_check',
    created() {
      const batchStr = this.$route.query.batchStr
      this.batchStr = batchStr
      this.init()
    },
    components: { SignDialog, FlowBtnRow },
    computed: {
      userId() {
        return this.$store.state.user.id
      },
      formDisabled() {
        return this.cuForm.sign_img_url
      }
    },
    data() {
      return {
        cuForm: {
          deliver_time: null
        },
        rules: {
          deliver_time: [
            { required: true, message: '请选择送达时间', trigger: 'change' }
          ]
        },
        formLoading: false,
        totalPrice: null,
        sign_img_url: null,
        batchStr: null
      }
    },
    methods: {
      init() {
        this.formLoading = true
        confirm_bill_detail({ batchStr: this.batchStr }).then(res => {
          let {
            data
          } = res
          var totalPrice = 0,
            picList = data.picList
          for (var i in picList) {
            var o = picList[i]
            totalPrice = accAdd(totalPrice, o.subtotal)
          }
          this.cuForm = data
          this.totalPrice = totalPrice
          this.formLoading = false
        })
      },
      showSignDialog() {
        this.$refs.signDialog.show()
      },
      // 获取签字信息方法
      confirmSign(data) {
        upFileBase64Anon({ file: data }).then(res => {
          this.sign_img_url = res.data
        })
      },
      submit() {
        this.$refs['cuForm'].validate((valid) => {
          if (valid) {
            this.postSubmit()
          }
        })
      },
      postSubmit() {
        this.$confirm('确定提交？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var picList = this.cuForm.picList,
            pic_prices_obj = {},
            pic_prices = []
          for (var i in picList) {
            var o = picList[i],
              pic_type_id = o.pic_type_id,
              price = o.price
            if (pic_prices_obj[pic_type_id] == undefined) {
              pic_prices_obj[pic_type_id] = price
              pic_prices.push({
                pic_type_id: pic_type_id,
                price: price
              })
            }
          }
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          sign_confirm_bill({
            batchStr: this.batchStr,
            signImgUrl: this.sign_img_url,
            deliver_time: this.cuForm.deliver_time,
            total: this.totalPrice,
            pic_prices: pic_prices
          }).then(res => {
            let {
              data
            } = res
            loading.close()
            if (data.resultCode !== undefined) {
              if (data.resultCode === 0) {
                this.$message({
                  type: 'success',
                  message: '确认成功!'
                })
                this.init()
              } else {
                this.$alert(data.resultMessage, '提示', {
                  confirmButtonText: '确定',
                  showClose: false,
                  callback: action => {
                    this.init()
                  }
                });
              }
            }
          }).catch(() => {
            loading.close()
          })
        })
      }


    }
  }
</script>

<style scoped lang="scss">
  .title {
    margin-top: 20px;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
  }

  .header {
    width: 80%;
    margin: 0 auto;
  }

  .content {
    margin-top: 20px;
  }

  .mailTable {
    width: 80%;
    font-size: 14px;
    margin: 0 auto 10px auto;
    border-collapse: collapse;
  }

  .mailTable tr td {
    height: 60px;
    line-height: 35px;
    box-sizing: border-box;
    padding: 0 10px;
    border-bottom: 1px solid #E6EAEE;
    border-right: 1px solid #E6EAEE;
    text-align: center;
  }

  .firstTr td {
    border-top: 1px solid #E6EAEE;
  }

  .firstTd {
    border-left: 1px solid #E6EAEE;
  }

  .mailTable tr td.column {
    text-align: center;
  }

  .tip {
    color: red;
    width: 200px;
  }

  .tip_td {
    padding: 0 20px !important;
    background-color: #F5F7FA;
    font-weight: bold;
  }

  /deep/ .el-form-item {
    margin-bottom: 0;
  }
</style>
